<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>组件</title>
    <link rel="stylesheet" href="style.css">
    <script src="../dist/vue.js"></script>
</head>

<!-- 子组件模板 -->
<template id="child-template">
    <input v-model="msg">
    <button v-on:click="notify">Dispatch Event</button>
</template>
<!-- 父组件模板 -->
<div id="events-example">
    <p>Messages: {{ messages | json }}</p>
    <child></child>
</div>
<script type="text/javascript">
// 注册子组件
// 将当前消息派发出去
Vue.component('child', {
    template: '#child-template',
    data: function() {
        return {
            msg: 'hello'
        }
    },
    methods: {
        notify: function() {
            if (this.msg.trim()) {
                this.$dispatch('child-msg', this.msg)
                this.msg = ''
            }
        }
    }
})

// 初始化父组件
// 将收到消息时将事件推入一个数组
var parent = new Vue({
    el: '#events-example',
    data: {
        messages: []
    },
    // 在创建实例时 `events` 选项简单地调用 `$on`
    events: {
        'child-msg': function(msg) {
            // 事件回调内的 `this` 自动绑定到注册它的实例上
            this.messages.push(msg)
        }
    }
})
</script>

<body>
</body>

</html>
